<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="applyId" label="申请编号" width="180">
      </el-table-column>
      <el-table-column prop="patient.patientName" label="患者姓名" width="180">
      </el-table-column>
      <el-table-column prop="remark" label="患者叙述" width="180">
      </el-table-column>
      <el-table-column prop="user.realName" label="申请医生" width="180">
      </el-table-column>
      <el-table-column prop="dept.deptName" label="住院部门" width="180">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 0">
            <el-button type="text" @click="register(scope.row)"
              >住院登记</el-button
            >
          </div>
          <div v-if="scope.row.status == 1">
            <el-button type="text" disabled>已登记</el-button>
          </div>
          <el-drawer
            title="住院登记"
            :before-close="handleClose"
            :visible.sync="dialog"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
          >
            <div class="demo-drawer__content">
              <el-form :model="form">
                <el-form-item label="患者姓名" :label-width="formLabelWidth">
                  <el-input
                    :disabled="true"
                    v-model="form.patientName"
                    autocomplete="off" style="width: 200px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="患者年龄" :label-width="formLabelWidth">
                  <el-input
                    :disabled="true"
                    v-model="form.patientAge"
                    autocomplete="off"
                    style="width: 200px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="病房选择" :label-width="formLabelWidth">
                  <div class="block">
                    <el-cascader
                      v-model="form.sickroomId"
                      :options="sickrooms"
                      :show-all-levels="false"
                      :props="{
                        value: 'sickroomId',
                        label: 'sickroomCode',
                        emitPath: false,
                        checkStrictly: true,
                      }"
                      @change="handleChange"
                    ></el-cascader>
                  </div>
                </el-form-item>
                <el-form-item
                  label="申请住院时间"
                  :label-width="formLabelWidth"
                  style="width: 200px"
                >
                  <div class="block">
                    <el-date-picker
                      v-model="form.beginDate"
                      type="datetime"
                      placeholder="选择日期时间"
                      align="right"
                      :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                  </div>
                </el-form-item>
                <el-form-item label="联系人" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.linkName"
                    autocomplete="off"
                    style="width: 200px"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="紧急电话"
                  :label-width="formLabelWidth"
                  style="width: 280px"
                >
                  <el-input
                    v-model="form.linkPhone"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button
                  type="primary"
                  @click="$refs.drawer.closeDrawer()"
                  :loading="loading"
                  >{{ loading ? "提交中 ..." : "确 定" }}</el-button
                >
              </div>
            </div>
          </el-drawer>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  change,
  getlist,
  insertHospitalized,
} from "@/api/hospital/hospitalApply.js";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      currentPage: 1,
      pageSize: 5,
      value: true,
      drawer: false,
      dialog: false,
      loading: false,
      form: {},
      formLabelWidth: "80px",
      timer: null,
      options:[],
      sickrooms:[],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    register(row) {
      this.sickrooms = row.sickrooms
      console.log(this.sickrooms);
      this.form = JSON.parse(JSON.stringify(row));
      this.form.patientName = this.form.patient.patientName;
      this.form.patientAge = this.form.patient.patientAge;
      this.dialog = true;
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm("确定要提交表单吗？")

        .then((r) => {})
        .then((_) => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch((_) => {});
      insertHospitalized(this.form);
      this.change(this.form.applyId);
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    getlist() {
      getlist({ pageNumber: this.currentPage, pageSize: this.pageSize }).then(
        (r) => {
          this.tableData = r.data.list;
          this.total = r.data.total;
        }
      );
    },
    change(applyId) {
      change(applyId).then((r) => {});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getlist();
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>

<style>
</style>